<template>
  <div class="detail-content">
    <!-- 用料 -->
    <div class="detail-material">
      <p>{{ info.product_story }}</p>
      <h4>用料</h4>
      <div class="detail-material-box">
        <!-- 主料 -->
        <div v-if="info.raw_material.main_material.length">
          <h5>主料</h5>
          <ul>
            <li v-for="item in info.raw_material.main_material" :key="item._id">
              <span class="name">{{ item.name }}</span>
              <span>{{ item.specs }}</span>
            </li>
          </ul>
        </div>
        <!-- 辅料 -->
        <div>
          <h5>辅料</h5>
          <ul>
            <li
              v-for="item in info.raw_material.accessories_material"
              :key="item._id"
            >
              <span class="name">{{ item.name }}</span>
              <span>{{ item.specs }}</span>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <!-- 步骤 -->
    <div class="detail-steps">
      <!-- 做法 -->
      <h2>{{ info.title }}的做法</h2>
      <section
        class="detail-section"
        v-for="(item, index) in info.steps"
        :key="item._id"
      >
        <i>{{ index + 1 }}.</i>
        <div class="step-text">
          <p>{{ item.describe }}</p>
          <img :src="item.img_url" alt="" v-if="item.img_url" />
        </div>
      </section>
      <!-- 技巧  -->
      <div class="skill" v-if="info.skill">
        <h2>烹饪技巧：</h2>
        <p>{{ info.skill }}</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  //接受父组件绑定的info并渲染
  props: {
    info: {
      type: Object,
      default: () => {},
    },
  },
};
</script>

<style lang="stylus" scoped>
.detail-content {
  margin-top: 50px;

  .detail-material {
    background-color: #fff;
    padding: 20px 30px;

    p {
      line-height: 30px;
      // text-indent: 2em;
      font-size: 14px;
      color: #444;
    }

    h4 {
      line-height: 2em;
    }

    .detail-material-box {
      h5 {
        line-height: 2em;
      }

      ul {
        display: flex;
        font-size: 14px;

        li {
          border: 1px solid #999;
          margin: 20px 20px;
          padding: 6px 10px;
          box-shadow: 0 0 3px inset;

          span {
            color: #666;

            &.name {
              color: #111;
              font-weight: 500;
              margin-right: 10px;
            }
          }
        }
      }
    }
  }

  .detail-steps {
    background-color: #fff;
    margin-top: 50px;
    padding: 20px 30px;

    h2 {
      line-height: 3em;
      border-bottom: 1px solid #999;
    }

    section {
      display: flex;
      // flex: 1;
      align-items: baseline;
      margin-top: 20px;
      border: 1px solid #000;

      i {
        width: 60px;
        font-size: 50px;
        color: red;
        margin-right: 30px;
        text-align: right;
      }

      div {
        flex: 1;

        p {
          margin-top: 20px 0;
        }

        img {
          max-width: 500px;
        }
      }
    }

    .skill {
      p {
        margin: 20px 30px;
      }
    }
  }
}
</style>